<template>
  <div>
    <!-- 上部分 -->
    <el-row type="flex" justify="end">
      <!-- 选择年份 -->
      <el-select
        v-model="currentYear"
        placeholder="请选择"
        style="width:120px;margin-right:10px;"
        @change="handleChange"
      >
        <el-option
          v-for="year in yearList"
          :key="year"
          :label="year"
          :value="year"
        />
      </el-select>
      <!-- 选择月份 -->
      <el-select
        v-model="currentMonth"
        placeholder="请选择"
        style="width:120px;"
        @change="handleChange"
      >
        <el-option
          v-for="month in 12"
          :key="month"
          :label="month"
          :value="month"
        />
      </el-select>
    </el-row>
    <!-- 下部分 -->
    <!-- 日历开始 -->
    <el-calendar
      v-if="isVisible"
      v-model="currentDate"
    >
      <template #dateCell="{ data,date }">
        <div class="date-content">
          <span class="text">{{ data.day | time }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
          <span v-else class="rest1">加</span>
        </div>
      </template></el-calendar>
    <!-- 日历结束 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'WorkCanlendar',
  filters: {
    time(value) {
      // 取出日
      const str = value.split('-')[2]
      // 把日中的0去掉,筛选从包含0的第一位开始截取，已知到最后，否则返回原始值
      return str.startsWith('0') ? str.slice(1) : str
    }
  },
  props: {
    // 1. 接收外部传递的默认日期对象
    startDate: {
      type: Date,
      default() {
        //   默认值这是复杂类型的所有需要函数形式表现
        return new Date()
      }
    }
  },
  data() {
    return {
      // 1. 年份
    //   yearList: [2021, 2022, 2023],
      // 2. 当前的年份
      currentYear: null,
      // 3. 当前的月份
      currentMonth: null,
      //   4. 这是日历
      currentDate: null,
      isVisible: true // 组件是否显示
    }
  },
  computed: {
    ...mapState('settings', ['language']),
    yearList() {
      //   使用计算属性，来自动计算年份，这边是在本年的上下5年内使用
      return Array.from(new Array(11)).map((item, index) => index + this.currentYear - 5)
    }
  },
  watch: {
    currentDate(newval) {
      // console.log(newval)
      this.currentYear = newval.getFullYear()
      this.currentMonth = newval.getMonth() + 1
    },
    // 监视语言的变化
    language() {
      // console.log('来了')
      // 作用: 让当前日历组件重新加载
      this.isVisible = false
      this.$nextTick(() => {
        this.isVisible = true
      })
    }
  },
  created() {
    // console.dir(this.startDate)
    this.currentYear = this.startDate.getFullYear()
    this.currentMonth = this.startDate.getMonth() + 1
  },
  methods: {
    handleChange() {
      console.log(this.currentMonth, this.currentYear)
      //   当下拉框的值发生改变的时候，将这个值赋值给日历组件，让两个的值像绑定
      this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}-01`)
    },
    isWeek(date) {
      // 判断通过date.getDay()这个方法把获取天数，0和6，就是双休，把是双修的返回true
    //   console.log(date.getDay())
      if (date.getDay() === 0 || date.getDay() === 6) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-day {
  height:  auto;
 }
::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border: none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .rest1 {
  color: #fff;
  border-radius: 50%;
  background: rgb(50, 177, 245);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
::v-deep .el-calendar__header {
   display: none
}
</style>
